<template>
    <view class="wallet-container">
        <view class="balance-card">
            <view class="balance-title">我的余额</view>
            <view class="balance-amount">¥ {{ balance.toFixed(2) }}</view>
        </view>

        <view class="menu-list">
            <view class="menu-item" @click="toBalanceLog">
                <view class="menu-item-left">
                    <text>余额明细</text>
                </view>
                <view class="menu-item-right">
                    <text class="iconfont">></text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from "vue";
import { getUserInfo } from "@/api/auth";
const balance = ref(0.0);

const toBalanceLog = () => {
    uni.navigateTo({
        url: "/pages/balanceLog/balanceLog",
    });
};

const getBalance = async () => {
    const res = await getUserInfo();
    balance.value = res.data.balance;
};
getBalance();
</script>

<style>
.wallet-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.balance-card {
    background: linear-gradient(to right, #1989fa, #39a9ed);
    border-radius: 12px;
    padding: 24px;
    color: white;
    box-shadow: 0 4px 12px rgba(25, 137, 250, 0.1);
    margin-bottom: 20px;
}

.balance-title {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 12px;
}

.balance-amount {
    font-size: 36px;
    font-weight: bold;
}

.menu-list {
    background-color: #fff;
    border-radius: 12px;
    padding: 0 16px;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    border-bottom: 1px solid #f5f5f5;
}

.menu-item:last-child {
    border-bottom: none;
}

.menu-item-left {
    font-size: 16px;
    color: #333;
}

.menu-item-right {
    color: #999;
}
</style>
